<template>
  <div>
    <!-- 搜索和新增部分 -->
    <el-row class="search_content">
      <el-col :span="8">
      分类名:
      <el-input
        v-model.trim="classifyName"
        placeholder="请输入内容"
        @keydown.enter.native="search"
        :clearable="true"
        size="mini"
        maxlength="11"
      ></el-input>
      </el-col>
      <el-col :span="8">
      描述:
      <el-input
        v-model.trim="memo"
        placeholder="请输入内容"
        @keydown.enter.native="search"
        :clearable="true"
        size="mini"
      ></el-input>
      </el-col>
      <el-col :span="4">
      <template>
        <!-- 要:clearable -->
        <el-select v-model="type" placeholder="祝您健康"
        :disabled="true" :clearable="true" size="mini">
          <el-option
            v-for="(item, value) in types"
            :key="value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
      </el-col>
      <el-col :span="2">
      <el-button size="mini" class="search_btn"
      type="primary" plain @click="search">搜索</el-button></el-col>
      <el-col :span="2">
      <el-button
      type="primary"
        @click="openAdd"
        class="fr add_btn"
        size="mini"
      >
        新增
      </el-button>
      </el-col>
    </el-row>
    <!-- 列表显示分类信息 -->
    <el-table id="el-table" :data="lists" @selection-change="getIds" stripe>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left">
            <el-form-item label="花卉" >
              <span>{{ props.row.memo }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55px"></el-table-column>
      <el-table-column label="id" prop="classify_id"></el-table-column>
      <el-table-column label="分类名" prop="classify_name"></el-table-column>
      <el-table-column label="地址" prop="memo" show-overflow-tooltip></el-table-column>
      <el-table-column label="创建时间" prop="create_time">
        <template slot-scope="scope">
          <span type="text">{{ scope.row.create_time | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="findOldClassify(scope.row)"
            >修改</el-button
          >
          <el-button type="text" @click="delClassify(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" align="middle" id="bottom">
      <el-col :span="4" :push="3">
        <el-button type="danger" size="mini" @click="batchDelete()"
          >批量删除</el-button
        >
      </el-col>
      <el-col :span="8" :push="6">
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="currPageChange"
          :current-page="curr_page"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <div class="back top" @click="top" v-show="!gotop" title="go顶部">
      <i class="el-icon-arrow-up"></i>
    </div>
    <div class="back bottom" v-show="gotop" @click="bottom" title="go底部">
      <i class="el-icon-arrow-down"></i>
    </div>
    <el-row>
      <!-- 分类新增抽屉 -->
      <el-drawer
        title="分类新增"
        :visible.sync="isShow"
        size="24%"
        direction="rtl"
      >
        <div class="addform">
          <el-form
            :model="params"
            :rules="rules"
            ref="addClassify"
            :label-position="labelPosition"
            label-width="80px"
          >
            <el-form-item label="分类名" prop="classify_name">
              <el-input
                placeholder="请输入分类名"
                :clearable="true"
                v-model.trim="params.classify_name"
                maxlength="11"
                style="width:110%"
              ></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="memo">
              <el-input
              type="textarea"
                placeholder="请输入描述"
                :clearable="true"
                v-model.trim="params.memo"
                maxlength="200"
                show-word-limit
                style="width:120%"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addClassify('addClassify')"
                >提交</el-button
              >
              <el-button @click="resetForm('addClassify')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </el-row>
    <el-row>
      <el-drawer
        title="分类修改"
        :visible.sync="updateShow"
        size="25%"
        direction="rtl"
      >
        <div class="addform">
          <el-form :model="params" :rules="rules" ref="updateClassify"
              :label-position="labelPosition"
            label-width="80px">
            <el-form-item label="分类名" prop="memo">
              <el-input
                :disabled="true"
                placeholder="请输入分类名"
                v-model.trim="params.classify_name"
                maxlength="11"
              ></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="memo">
              <el-input
              style="width:300px"
              type="textarea"
                placeholder="请输入描述"
                show-word-limit
                :clearable="true"
                v-model.trim="params.memo"
                :rows="4"
                maxlength="200"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateClassify('updateClassify')"
                >提交</el-button
              >
              <el-button @click="resetForm('updateClassify')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </el-row>
  </div>
</template>

<script>
import http from '@/utils/httpUtil'
import aes from '@/utils/AESUtil.js'
export default {
  data () {
    return {
      // 右边抽屉
      direction: 'rtl',
      drawer: false,
      labelPosition: 'left',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      gotop: true,
      isShow: false,
      updateShow: false,
      action: {
        classifyList: 'ssmService/classify/selectPageClassify',
        addClassify: 'ssmService/classify/addClassify',
        updateClassify: 'ssmService/classify/updateClassify',
        selectClassifyById: 'ssmService/classify/selectClassifyById',
        deleteClassify: 'ssmService/classify/deleteClassify'
      },
      lists: [],
      permission: [],
      total: 0,
      page_size: 10,
      curr_page: 1,
      type: '',
      types: [
        {
          label: '租出',
          value: 1
        },
        {
          label: '购入',
          value: 2
        }
      ],
      memo: '',
      classifyName: '',
      params: {
        classify_name: '',
        memo: ''
      },
      rules: {
        classify_name: [
          {
            required: true,
            message: '请输入分类名',
            trigger: 'blur'
          },
          {
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
            message: '请输入正确的格式'
          }
        ],
        memo: [
          {
            required: true,
            message: '请输入描述',
            trigger: 'blur'
          }
        ]
      },
      ids: ''
    }
  },
  mounted () {
    // 页面加载时调用
    this.getClassifyList()
  },
  methods: {
    top () {
      document.getElementById('top').scrollIntoView()
    },
    bottom () {
      document.getElementById('bottom').scrollIntoView(false)
    },
    // 当前页总条数改变时函数
    pageSizeChange (pageSize) {
      this.getClassifyList(this.memo, this.classifyName, this.type, 1, pageSize)
    },
    // 当前页改变时函数
    currPageChange (currPage) {
      this.getClassifyList(
        this.memo,
        this.classifyName,
        this.type,
        currPage,
        this.page_size
      )
    },
    // 获取分类列表
    getClassifyList (
      memo = null,
      classifyName = null,
      type = null,
      curr_page = 1,
      page_size = 10
    ) {
      const params = {
        curr_page: curr_page,
        page_size: page_size
      }
      if (memo !== null && memo !== '') {
        params['memo'] = memo
      }
      if (classifyName !== null && classifyName !== '') {
        params['classify_name'] = classifyName
      }
      if (type !== null && type !== '') {
        params['type'] = type
      }
      // 分页查询分类信息
      http.xhrGet(this, this.action.classifyList, params, res => {
        console.log(res)
        // 总条数，当前页，当前页最大条数，数据
        this.total = res.data.total
        this.curr_page = res.data.pageNum
        this.page_size = res.data.pageSize
        this.lists = res.data.list
      })
    },
    // 搜索功能
    search () {
      let memo = this.memo
      let classify_name = this.classifyName
      let type = this.type
      this.getClassifyList(
        memo,
        classify_name,
        type,
        1,
        10
      )
    },
    // 打开新增分类抽屉
    openAdd () {
      this.isShow = true
      this.params = {
        classify_name: '',
        phone: '',
        memo: '',
        type: 1,
        py_memo: '',
        py_classify_name: ''
      }
    },
    // 重置表单，只有添加了验证的才会重置
    resetForm (refName) {
      this.$refs[refName].resetFields()
    },
    // 新增分类
    addClassify (refName) {
      this.$refs[refName].validate((valid) => {
        if (valid) {
          const params = this.params
          params['baseModel.token'] = aes.getRandom(16, 16)
          // 发送数据给服务器，实现新增功能
          http.xhrPost(this, this.action.addClassify, params, res => {
            // 给出提示，新增成功，关闭抽屉，刷新页面，清空表单
            this.$message({
              type: 'success',
              message: res.message
            })
            this.isShow = false
            this.getClassifyList()
            // 表单重置
            this.params = {
              classify_name: '',
              memo: ''
            }
          })
        } else {
          return false
        }
      })
    },
    // 修改分类信息
    updateClassify (refName) {
      this.$refs[refName].validate(valid => {
        if (valid) {
          // 防止反复提交，生成永不重复的uuid
          this.params['baseModel.token'] = aes.getRandom(16, 16)
          // 发送修改请求
          http.xhrPost(this, this.action.updateClassify, this.params, res => {
            this.$message({
              type: 'success',
              message: res.message
            })
            this.params = {
              classify_name: '',
              memo: ''
            }
            this.updateShow = false
            // 刷新指定页
            this.getClassifyList(
              this.classifyName,
              this.memo
            )
          })
        } else {
          return false
        }
      })
    },
    // 将旧数据回显到页面上
    findOldClassify (classify) {
      this.updateShow = true
      // 根据userid取出最新的分类数据，因为version版本必须是最新的
      const param = {
        classify_id: classify.classify_id
      }
      http.xhrGet(this, this.action.selectClassifyById, param, res => {
        this.params.classify_name = res.data[0].classify_name
        this.params.memo = res.data[0].memo
        this.params.version = res.data[0].version
        this.params.classify_id = res.data[0].classify_id
      })
    },
    // 批量删除
    batchDelete () {
      if (this.ids !== '') {
        this.$confirm('您正在执行批量操作，是否继续', '提示', {
          confirmButtonText: '确认执行',
          cancelButtonText: '容我想想'
        }).then(() => {
          // .catch() 防止取消时报错
          let ids = this.ids.substring(0, this.ids.length - 1)
          this.xhrDelete(ids)
        }).catch(() => {

        })
      } else {
        this.$message({
          type: 'error',
          message: '请至少选中一条'
        })
      }
    },
    // 得到所有的id
    getIds (classifys) {
      console.log(classifys)
      this.ids = ''
      classifys.forEach((item, index) => {
        this.ids += item.classify_id + ','
      })
    },
    // 单个删除
    delClassify (classifys) {
      // 询问分类是否删除
      this.$confirm('您确定要删除当前记录吗?', '确定删除?', {
        confirmButtonText: '残忍丢弃',
        cancelButtonText: '容我想想'
      }).then(() => {
        // 发送删除请求
        this.xhrDelete(classifys.classify_id)
      }).catch(() => {

      })
    },
    // 删除请求
    xhrDelete (ids) {
      // 发送真实删除请求
      http.xhrPost(this, this.action.deleteClassify + '/' + ids, null, res => {
        this.$message({
          type: 'success',
          message: res.message
        })
        this.getClassifyList(
          this.memo,
          this.classifyName,
          this.type,
          this.curr_page,
          this.page_size
        )
      })
    }
  },
  components: {},
  // 过滤器
  filters: {
    formatDate (value) {
      // 时间戳转换日期格式方法
      if (value == null) {
        return ''
      } else {
        let date = new Date(value)
        let y = date.getFullYear() // 年
        let MM = date.getMonth() + 1 // 月
        MM = MM < 10 ? '0' + MM : MM
        let d = date.getDate() // 日
        d = d < 10 ? '0' + d : d
        let h = date.getHours() // 时
        h = h < 10 ? '0' + h : h
        let m = date.getMinutes() // 分
        m = m < 10 ? '0' + m : m
        let s = date.getSeconds() // 秒
        s = s < 10 ? '0' + s : s
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
      }
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/reset.css";
@import "../../assets/css/client.css";
</style>
